<template>
    <view>
        <view v-show="address1" class="address">
            <view>
                <van-image id="tou" round width="3rem" height="3rem" :src="imgSrc"/>  
            </view>      
            <view class="name"><span><van-icon size="20px" name="friends-o" />收货人：</span>{{consignee}},</view>
            <view class="phone"><span><van-icon size="20px" name="phone-o" />联系电话：</span>{{phone}},</view>
            <view class="myaddress"><span><van-icon size="20px" name="location-o" />收货地址：</span>{{address}}</view>
            <van-button @click="toEdit()" id="edit" size="small" plain type="primary">编辑</van-button>
        </view>
        <!-- ----- 
        <view v-show="address2" class="editAdress">
            <van-icon name="add" size="60px" />
            <view class="add">新增收货地址</view>
        </view>
        -->
    </view>
</template>
<script>
export default {
    data(){
        return{
            addressList:[],
            imgSrc:'',
            phone:'',
            consignee:'',
            address:'',
        }
    },
    computed:{
        address1(){
            if(this.consignee || this.phone || this.address != ''){
                return true;
            }else{
                return false;
            }
        },
        address2(){
            if(this.consignee || this.phone || this.address == ''){
                return true;
            }else{
                return false;
            }
        },
    },
    methods:{
        toEdit(){
            uni.navigateTo({
                url: '../Confirm/Confirm'
            });
        },
        
        
    },
    onLoad(){
        this.imgSrc = getApp().globalData.userInfo[0].avatarUrl
        this.phone = getApp().globalData.userInfo[0].phone
        this.consignee = getApp().globalData.userInfo[0].consignee
        this.address = getApp().globalData.userInfo[0].address
    }
}
</script>
<style scoped>
.address{
    width: 100%;
    height: 240rpx;
    padding: 10rpx;
    background-color: rgb(236, 232, 232);
}
.editAdress{
    width: 100%;
    height: 200rpx;
    background-color: rgb(236, 232, 232);
    display: flex;
    align-items: center;
    justify-content: center;
}
.add{
    font-size: 14px;
    color: rgb(114, 111, 111);
}  
#tou{
    margin-top: 30rpx;
}
.name{
    float: left;
} 
.phone{
    float: left;
} 
.myaddress{
    float: left;
}
#edit{
    position: absolute;
    right: 20rpx;
    top: 20rpx;  
} 
</style>